<template>
  <div class="paper">
    <nav aria-label="Page navigation">
      <ul class="pagination">
        <li>
          <span class="pageInfo">共{{ allPage }}条数据</span>
        </li>
        <li>
          <a href="#" aria-label="Previous" v-show="current != 1" @click="current--&&jumpcurrent-- && goto(current)">
            <span aria-hidden="true">上一页</span>
          </a>
        </li>
        <li :class="{'active':current == index}" v-for="index in pages"><a href="#" @click="goto(index)">{{ index }}</a>
        </li>
        <li>
          <a href="#"
             aria-label="Next"
             v-show="total != current && total != 0 "
             @click="current++ && jumpcurrent ++ && goto(current)">
            <span aria-hidden="true">下一页</span>
          </a>
        </li>
        <li>
          <a href="#" style="margin-left:10px;border:none;padding:2px 0;">第</a>
          <a href="#" style="padding:0;">
            <input class="jumpPage" type="text" v-model="jumpcurrent">
          </a>
          <a href="#" style="border:none;padding:2px 0;">页</a>
        </li>
        <li>
          <a
              href="#"
              style="margin-left:10px;background:#337AB7;color:#fff;border-color:#337AB7;"
              @click="goto(jumpcurrent)"
          >跳转</a>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'paper',
  props: ['total', 'allPage'],
  data() {
    return {
      jumpcurrent: 1,//跳转页计数
      current: 1,//显示页计数
      currentnum: 5,//导航总显示个数
    }
  },
  watch: {
    current: function (old, newVal) {
    }
  },
  computed: {
    pages: function () {
      let pag = [];
      if (this.current < this.currentnum) { //如果当前的激活的项 小于要显示的条数
//总页数和要显示的条数那个大就显示多少条
        var i = Math.min(this.currentnum, this.total);
        while (i) {
          pag.unshift(i--);
        }
      } else { //当前页数大于显示页数了
        let middle = this.current - Math.floor(this.currentnum / 2),//从哪里开始
            i = this.currentnum;
        if (middle > (this.total - this.currentnum)) {
          middle = (this.total - this.currentnum) + 1
        }
        while (i--) {
          pag.push(middle++);
        }
      }
      return pag
    }
  },
  methods: {
    // 跳转
    goto: function (index) {
      if (this.jumpcurrent > this.total) {
        this.jumpcurrent = this.current;
        console.log({
          title: "超出最大页码",
          text: "2秒后自动关闭。",
          icon: "error",
          timer: 2000,
          buttons: false
        });
        return;
      } else {
        this.jumpcurrent = index;
        this.current = index;
      }
      this.$emit("change", index);
    }
  }
}
</script>

<style scoped>
.pagination {
  margin: 0;
}

.pagination > li > a {
  background: none;
  /*background:rgba(211,220,230,.5);*/
  color: #555;
  padding: 2px 10px;
  margin: 0 2px;
  border-color: #99A0A8;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
}

/*.active {
background-color: #337AB7;
color:#fff;
}*/
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
  background-color: #337AB7;
  color: #f8f8f8;
  border-color: #337AB7;
}

.jumpPage {
  width: 25px;
  text-align: center;
  background: none;
  border: none;
  padding: 2px 0;
}

.pageInfo {
  padding: 2px 10px;
  background: none;
  border: none;
  color: #444;
}

.pageInfo:hover {
  background: none;
  border: none;
  color: #444;
}
</style>